/**
 * @class NG.views.Settings
 * @extends Ext.form.FormPanel
 * 
 * This panel used for displaying settings.
 * 
 */
NG.views.Settings = Ext.extend(Ext.form.FormPanel, {
        scroll: 'vertical',
        standardSubmit : false,
        items: [{
                xtype: 'fieldset',
                title: 'Bilgiler',
                instructions: L_WRITE_YOUR_INFO_ABOVE,
                defaults: {
                    required: true,
                    labelAlign: 'left',
                    labelWidth: '40%'
                },
                items: [
                {
                    xtype: 'textfield',
                    name : 'name',
                    label: L_NAME,
                    useClearIcon: true,
                    autoCapitalize : false
                }, {
                    xtype: 'passwordfield',
                    name : 'password',
                    label: L_PASSWORD,
                    useClearIcon: false
                }, {
                    xtype: 'emailfield',
                    name : 'email',
                    label: L_EMAIL,
                    placeHolder: 'ng@e-posta',
                    useClearIcon: true
                }, {
                    xtype: 'urlfield',
                    name : 'url',
                    label: 'Url',
                    placeHolder: 'http://netgis.com.tr',
                    useClearIcon: true
                }, {
                    xtype: 'numberfield',
                    name : 'tileSize',
                    label: L_TILE_SIZE,
                    value: 256,
                    useClearIcon: false
                }, {
                    xtype: 'selectfield',
                    name : 'language',
                    label: L_LANG,
                    valueField : 'language',
                    displayField : 'title',
                    store : NG.stores.language
                }]
            }, {
                xtype: 'fieldset',
                title: L_CACHE,
                defaults: {
                    labelWidth: '45%'
                },                    
                items: [{
                    xtype: 'togglefield',
                    name: 'useCache',
                    label: L_USE,
                    value : true
                }, {
                	xtype: 'numberfield',
                	name : 'cacheTimeout',
                	label: L_TIMEOUT,
                	value: 30
                }, {
                    xtype: 'togglefield',
                    name: 'offline',
                    label: L_ONLINE,
                    value : false
                },{
                	xtype: 'button',
                	text: L_CLEAR_CACHES,
                	handler: function (){
                		Ext.dispatch({
                			controller: app.controllers.settings,
                			action: 'clearCaches'
                		});
                	}
                },{
                	xtype: 'button',
                	text: 'Veritabanı Temizle',
                	handler: function (){
                		Ext.dispatch({
                			controller: app.controllers.settings,
                			action: 'clearStore'
                		});
                	}
                }]
            }, {
                xtype: 'fieldset',
                title: L_CONTROLS,
                items: [{
                    xtype: 'togglefield',
                    name: 'showZoomControl',
                    label: L_ZOOM_CONTROL,
                    value : true
                }]
            },
            {
                xtype: 'fieldset',
                title: L_VISUALITY,
                items: [{
    					xtype: "colorpickerfield",
    					label: L_PATH_COLOR,
    					name: "lineColor" //path line color, default blue
                }]
            }
        ],
        
        initComponent : function() {
            if (true || Ext.is.Phone) { //Fullscreen in all devices
                this.fullscreen = true;
                this.modal = true;
                this.autoRender = true;
                this.floating = true;
                this.hideOnMaskTap = false;
            } else {
                Ext.apply(this, {
                    autoRender: true,
                    floating: true,
                    modal: true,
                    centered: true,
                    hideOnMaskTap: false,
                    height: 385,
                    width: 480
                });
            }
            NG.views.Settings.superclass.initComponent.call(this);
            var form = this;
            var items = this.initDockedItems(form);
            this.addDocked(items);

            this.listeners = {
                submit : function(form, result){
                    NGLogger.info('success', Ext.toArray(arguments));
                },
                exception : function(form, result){
                    NGLogger.info('failure', Ext.toArray(arguments));
                },
                show : function(form) {
                	form.loadModel(app.getSettings());
                } 
            };
        },

        //@private
        initDockedItems: function (form){
        	return [
            {
                xtype: 'toolbar',
                dock: 'bottom',
                title: L_SETTINGS,
                items: [
							{
								iconCls: 'delete',
								iconMask: true,
								ui: 'plain',
								handler: function (){
									//TODO ipad'de klavye yok olmuyor kapatırken
									form.hide();
								}
							},
							{xtype: 'spacer'},                            
		                    {
		                        text: L_DEFAULT,
		                        ui: 'round',
		                        handler: function() {
		                        	var settings = Ext.ModelMgr.create(app.DEFAULT_SETTINGS, 'NG.models.Settings');
		                            form.loadModel(settings);
		                        }
		                    }, {
		                        text: L_CLEAR,
		                        handler: function() {
		                            form.reset();
		                        }
		                    }, {
		                        text: L_SAVE,
		                        ui: 'confirm',
		                        handler: function() {
		                        	Ext.dispatch({
		                        		controller: app.controllers.settings,
		                        		action: 'save',
		                        		form: form
		                        	});                            	
		                        }
		                    }
		                ]
		            }
		        ]; 
        }
});
